<template>
    <el-date-picker
      :modelValue="modelValue"
      :type="type"
      @update:modelValue="(val) => $emit('update:modelValue', val)"
      v-bind="$attrs"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
      @calendar-change="handleCalendarChange"
      @panel-change="handlePanelChange"
      @visible-change="handleVisibleChange"
      :range-separator="rangeSeparator || 'To'"
      :start-placeholder="startPlaceholder || 'Start date'"
      :end-placeholder="endPlaceholder || 'End date'"
      :format="format || 'YYYY/MM/DD'"
      :value-format="valueFormat || 'YYYY-MM-DD'"
    ></el-date-picker>
  </template>
  
  <script lang="ts" setup>
  import { DatePickerType } from '../types';
  
  /**
   * FormDatePicker 组件 props 定义
   */
  const props = defineProps<{
    modelValue: string | Date | string[] | Date[] | undefined;
    type?: DatePickerType;
    format?: string;
    valueFormat?: string;
    startPlaceholder?: string;
    endPlaceholder?: string;
    rangeSeparator?: string;
  }>();
  
  /**
   * FormDatePicker 组件 emit 定义
   */
  const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
    (e: 'change', value: any): void;
    (e: 'focus', event: FocusEvent): void;
    (e: 'blur', event: FocusEvent): void;
    (e: 'calendar-change', date: Date[]): void;
    (e: 'panel-change', date: Date, mode: string, view: string): void;
    (e: 'visible-change', visibility: boolean): void;
  }>();
  
  // 处理日期变更
  const handleChange = (value: any) => {
    emit('change', value);
  };
  
  // 处理获取焦点事件
  const handleFocus = (event: FocusEvent) => {
    emit('focus', event);
  };
  
  // 处理失去焦点事件
  const handleBlur = (event: FocusEvent) => {
    emit('blur', event);
  };
  
  // 处理日历变更
  const handleCalendarChange = (date: Date[]) => {
    emit('calendar-change', date);
  };
  
  // 处理面板变更
  const handlePanelChange = (date: Date, mode: string, view: string) => {
    emit('panel-change', date, mode, view);
  };
  
  // 处理可见性变更
  const handleVisibleChange = (visibility: boolean) => {
    emit('visible-change', visibility);
  };
  </script>